<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            width: 300px;
            height: 50px;
            border: 1px solid #333;
            /* 去除外线 */
            outline: none;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <input id="user" type="text">
</body>
<script>

    var userInp = document.getElementById("user");
    
    // onfocus  输入框聚焦时触发
    // onblur  输入框失焦时触发
    // oninput 输入框内容改变时触发

    // userInp.oninput= function(){
    //     var user = userInp.value;
    //     console.log(user);
    //     console.log("交互:将关键词传递给后端,后端返回搜索的结果");
    // }

    // 防抖处理:  短时间内连续触发,只执行最后一次 (实现步骤: 将需要执行的内容包裹在延时器中, 如果短时间内连续触发先清除上一个,再启动新的  => 最终只触发一次)
    var timer = null;
    userInp.oninput= function(){
        clearTimeout(timer);  // 如果在300ms内连续输入 => 先清除上一个,再启动新的
        timer = setTimeout(function(){ // 当前延时器从启动到执行需要300ms
            var user = userInp.value;
            console.log(user);
            console.log("交互:将关键词传递给后端,后端返回搜索的结果");
        },300);
    }






</script>

</html>